<template>
  <h4>child组件-城市模块</h4>
  <div>当前城市: {{ store.cityName }}</div>
  <div>城市倒序: {{ store.reverseCity }}</div>
  <button @click="handleClick">改变城市</button>
</template>

<script lang="ts" setup>
import { useCityStore } from "./stores/city";

const store = useCityStore();

const handleClick = () => {
  // 可以在组件里面直接修改仓库数据
  // store.cityName = "广州";

  // 还可以调用仓库里面的方法来修改仓库数据
  // store.changeCity("上海");

  // 还可以通过store.$patch一次性修改多个值
  store.$patch({
    cityName: "深圳",
  });
};

// 订阅仓库数据的改变
// 这个方法会在仓库数据改变以后调用
store.$subscribe((mutation, state) => {
  console.log(mutation);
  console.log(state);
});
</script>

<!-- 
  <div class="box" id="box">
    <h1>{{ title }}</h1>
    <ul>
      <li>11</li>
      <li>{{ num }}</li>
    </ul>
  </div>
  在vue中写的这段，只是近似于html的代码

  vue看到这段话，会先将这段话转成一个对象
  vue内部有一个createElement的函数
  {
    tag: "div",
    attr: {class: "box", id: "box"},
    children: [
      {
        tag: "h1",
        attr: [],
        children: "标题"
      },
      {
        tag: "ul",
        attr: [],
        children: [
          {
            tag: "li",
            attr: [],
            children: 11
          },
          {
            tag: "li",
            attr: [],
            children: 22
          },
        ]
      }
    ]
  }

 -->

<!-- 
  时间复杂度： 一个算法一共要执行多少步
    冒泡排序 10 -> 45
            n -> n^2 / 2 - n / 2
  
            n - 1 + n - 2 + n - 3 +.... + 1
            n * (n - 1) / 2

            n^2 / 2 - n / 2
  
  空间复杂度： 一个算法要占据多少内存
  -->
